<template>
  <div class="hospitalDiseasesEdit detailView pd-20">
    <Modal v-model="isView"
           :mask-closable="false"
           title="编辑疾病库"
           width="80%"
           :footer-hide="true">
      <el-form :model="formModel"
               label-position="right"
               label-width="100px"
               :rules="rules"
               ref="form">
        <el-form-item label="医院"
                      prop="hospitalId">
          <el-select v-model="formModel.hospitalId"
                     filterable
                     remote
                     :remote-method="remoteMethod"
                     :loading="loading"
                     class="w-200"
                     placeholder="请选择医院">
            <el-option v-for="(hospital, index) in hospitalList"
                       :value="hospital.id"
                       :label="hospital.name"
                       :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="疾病"
                      prop="disease">
          <el-input v-model="formModel.disease"
                    type="textarea"
                    placeholder="请选择下方角色名称列表"
                    :rows="4"
                    disabled />
        </el-form-item>
      </el-form>
      <div>
        <el-input v-model="param.searchCondition"
                  placeholder="请输入角色名称"
                  class="w-200"
                  clearable
                  @clear="_getDisLibraryList" />
        <el-button type="primary"
                   @click="_getDisLibraryList">查 询</el-button>
      </div>
      <Table :columns="dataCol"
             :data="dataList"
             class="mt-20"
             border
             stripe
             @on-selection-change="changeCheckModule"
             @on-select="selectCheckModule"
             @on-select-cancel="cancelCheckModule"
             @on-select-all="selectAll"
             @on-select-all-cancel="cancelSelectAll"></Table>
      <page @getList="_getDisLibraryList"
            :pageTotal="pageTotal"
            ref="page"></page>
      <div class="operationView">
        <el-button @click="isView = false">取 消</el-button>
        <el-button type="primary"
                   @click="handleSave">保 存</el-button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'
  export default {
    name: "hospitalDiseasesEdit",
    data () {
      return {
        isView: false,
        hospitalList: [],
        loading: true,
        formModel: {
          hospitalId: '',
          jsonDataName: [],
          jsonData: [],
          disease: ''
        },
        dataCol: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '角色名称',
            key: 'name'
          },
          {
            title: '介绍',
            key: 'introduceUrl'
          }
        ],
        dataList: [],
        pageTotal: 0,
        param: {
          searchCondition: ''
        },
        rules: {
          hospitalId: [
            { required: true, message: '请选择医院', trigger: 'blur' }
          ],
          disease: [
            { required: true, message: '请选择疾病', trigger: 'blur' }
          ]
        },
      }
    },
    created () {
      this._getDisLibraryList();
    },
    methods: {
      openView (row) {
        this.isView = true;
        this.$refs['form'].resetFields();
        if (row) {
          this.formModel = {
            ...row,
            hospitalId: '',
            jsonDataName: [],
            jsonData: [],
            disease: ''
          };
        } else {
          this.formModel = {
            id: 0,
            hospitalId: '',
            jsonDataName: [],
            jsonData: [],
            disease: ''
          }
        }
      },

      selectCheckModule (selection, module) {
        this.formModel.jsonDataName.push(module.name);
        this.formModel.jsonData.push(module.id);
        this.formModel.disease = this.formModel.jsonDataName.join(',');
      },
      cancelCheckModule (selection, module) {
        this.formModel.jsonData.forEach((obj, i) => {
          if (obj == module.id) {
            this.formModel.jsonDataName.splice(i, 1);
            this.formModel.jsonData.splice(i, 1);
          }
        })
        this.formModel.disease = this.formModel.jsonDataName.join(',');
      },
      selectAll (selection) {
        let names = [];
        let ids = [];
        selection.forEach(obj => {
          names.push(obj.name);
          ids.push(obj.id);
        })
        names = new Set([this.formModel.jsonDataName, ...names].flat());
        this.formModel.jsonDataName = [...names];
        ids = new Set([this.formModel.jsonData, ...ids].flat());
        this.formModel.jsonData = [...ids];
        this.formModel.disease = this.formModel.jsonDataName.join(',');
      },
      cancelSelectAll (selection) {
        this.dataList.forEach((arr1) => {
          this.formModel.jsonData.forEach((arr2, j) => {
            if (arr1.id == arr2) {
              this.formModel.jsonDataName.splice(j, 1);
              this.formModel.jsonData.splice(j, 1);
            }
          })
        })
        this.formModel.disease = this.formModel.jsonDataName.join(',');
      },
      changeCheckModule (selection) {
      },
      remoteMethod (query) {
        if (query !== '') {
          this.loading = true;
          this.post(this.api.searchHospital, { "pageSize": 20, "pageStart": 0, "name": query }).then((res) => {
            if (res.data.code === '200') {
              this.hospitalList = res.data.object;
            }
          });
        } else {
          this.hospitalList = [];
        }
        this.loading = false;
      },
      handleSave () {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.post(this.api.hospitalDiseasesEdit.url, this.formModel).then((res) => {
              if (res.data.code === '200') {
                this.$message.success('保存成功！');
                this.isView = false;
                this.$emit('getList');
              }
            })

          }
        })
      },
      _getDisLibraryList () {
        this.post(this.api.disLibraryList.url, {
          ...this.page,
          ...this.param
        }).then((res) => {
          if (res.data.code === '200') {
            this.dataList = res.data.object;
            this.pageTotal = res.data.totalNum;
            if (this.dataList.length && this.formModel.jsonData.length) {
              this.dataList.forEach((arr1) => {
                this.formModel.jsonData.forEach((arr2) => {
                  if (arr1.id == arr2) {
                    arr1._checked = true;
                  }
                })
              })
            }
          }
        })
      }
    },
    computed: {
      ...mapGetters([
        'page'
      ])
    },
    components: {
      Page
    }
  }
</script>
<style scoped lang="scss" >
</style>
